<template>
  <div class="circle-3">
    <svg viewBox="0 0 644 644" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <linearGradient x1="0%" y1="21.972%" y2="78.191%" id="circle-3-a">
          <stop stop-color="#0FF" offset="0%"></stop>
          <stop stop-color="#A74BEB" offset="100%"></stop>
        </linearGradient>
        <linearGradient x1="14.853%" y1="15.892%" y2="79.178%" id="circle-3-b">
          <stop stop-color="#0FF" offset="0%"></stop>
          <stop stop-color="#004CFF" offset="100%"></stop>
        </linearGradient>
        <linearGradient x1="9.104%" y1="15.892%" x2="86.782%" y2="82.555%" id="circle-3-c">
          <stop stop-color="#9B28F2" offset="0%"></stop>
          <stop stop-color="#00F8F5" offset="100%"></stop>
        </linearGradient>
      </defs>
      <g transform="translate(1 1)" fill="none" fill-rule="evenodd" opacity=".942">
        <path d="M435 321c0 62.96-51.04 114-114 114s-114-51.04-114-114 51.04-114 114-114 114 51.04 114 114z" stroke="url(#circle-3-a)" stroke-width="6.022"></path>
        <path d="M509 321.5C509 425.055 425.053 509 321.5 509S134 425.055 134 321.5C134 217.947 217.947 134 321.5 134S509 217.947 509 321.5z" stroke="url(#circle-3-b)" stroke-width="3.601"></path>
        <path d="M571 321c0 138.07-111.93 250-250 250-138.072 0-250-111.93-250-250S182.928 71 321 71c138.07 0 250 111.93 250 250z" stroke="url(#circle-3-c)" stroke-width="2.39"></path>
        <path d="M642 321c0 177.283-143.716 321-321 321S0 498.283 0 321 143.716 0 321 0s321 143.717 321 321z" stroke="#00BBFE" stroke-width="1.179"></path>
        <circle id="circle-right" fill="#0FF" cx="569" cy="293" r="8"></circle>
        <circle id="circle-left" fill="#0092FF" cx="120.5" cy="471.5" r="6.5"></circle>
      </g>
    </svg>
  </div>
</template>
 
<script>
export default {
  name: 'vueName',
  data () {
    return {
      msg:''
    }
  }
}
</script>
 
<style scoped lang="scss">
  .circle-3{
    display: block;
    width: 642px;
    height: 642px;
    svg{
      width: 100%;
      height: 100%;
    }
    #circle-right {
      transform-origin: center;
      animation: circle-3-b-rotate 50s linear infinite;
    }
    #circle-left {
      transform-origin: center;
      animation: circle-3-a-rotate 50s linear infinite;
    }
  }

  @keyframes circle-3-b-rotate {
    0% {
        fill: #0FF;
        transform: rotate(0);
    }
    40% {
        fill: #0092FF;
        transform: rotate(144deg);
    }
    60% {
        fill: #9B28F2;
        transform: rotate(216deg);
    }
    100% {
        fill: #0FF;
        transform: rotate(360deg);
    }
  }
  @keyframes circle-3-a-rotate{
    0% {
        fill: #0092FF;
        transform: rotate(0);
    }
    25% {
        fill: #9B28F2;
        transform: rotate(90deg);
    }
    75% {
        fill: #00F8F5;
        transform: rotate(270deg);
    }
    100% {
        fill: #0092FF;
        transform: rotate(360deg);
    }
  }
</style>